<!--
	版本声明：
	* 由于 WanlLive、WanlChat、WanlPay 以下代码开发难度较大，已将相关代码独立申请著作权，受法律保护！！！
	* 无论你购买任何版本，均不允许复制到第三方直接、间接使用，且也不能以学习为目的参考和借鉴！！
	* 你仅有在 WanlShop 中使用、二次开发权利，否则我们会追究法律责任
	* 深圳前海万联科技有限公司 @www.i36k.com
	* 法律顾问：易法通 @http://www.yifatong.com/
-->
<template>
  <view class="flex justify-center align-center" :style="{ width: `${width}px` }">
    <video
      :id="`video${videoId}`"
      ref="`video${videoId}`"
      class="flex justify-center align-center"
      :style="{ height: `${height}px`, width: `${width}px` }"
      :src="src"
      :controls="false"
      :show-play-btn="false"
      :enable-progress-gesture="false"
      :object-fit="videoFit"
      :muted="!initialize || !play"
      :initial-time="startTime"
      loop
      @play="continuePlay"
      @timeupdate="timeupdate"
    />
    <view class="position-absolute" v-if="!play && !OpenCover">
      <text class="icon">&#xe60f;</text>
    </view>
    <!-- 封面图片 -->
    <view class="position-absolute" v-if="OpenCover">
      <image :style="{ height: `${height}px`, width: `${width}px` }" :src="coverUrl" mode="aspectFill" />
      <!-- #ifndef H5 -->
      <view class="position-center align-center justify-center">
        <text class="icon icon-spin">&#xe607;</text>
      </view>
      <!-- #endif -->
    </view>
    <!-- 上阴影 -->
    <view class="video-top" />
    <!-- 下阴影 -->
    <view class="video-bottom" />
  </view>
</template>

<script>
export default {
  props: {
    videoId: {
      type: Number,
      default: 0,
    },
    src: {
      type: String,
      default: '',
    },
    play: {
      type: Boolean,
      default: false,
    },
    height: {
      type: Number,
      default: 0,
    },
    width: {
      type: Number,
      default: 0,
    },

    objectFit: {
      type: String,
      default: 'cover',
    },
    coverUrl: {
      //视频封面的图片
      type: String,
      default: '',
    },
    initialTime: {
      type: Number,
      default: 0,
    },
    gDuration: {
      type: Number,
      default: 999,
    },
  },
  data() {
    return {
      videoFit: 'cover', // 优化HBuilder展示bug
      time: 0, // 时间类
      duration: 0, // 视频时长
      OpenCover: true, // 是否开启封面
      initialize: false, // 初始化
      videoTimer: null, // 计时器
    };
  },
  mounted() {
    // 修复HBuilder X 3.1.22 App端视频展示BUG，如果官方修复此问题video直接调用objectFit
    this.videoFit = this.objectFit;
    // #ifdef APP-PLUS
    let sys = uni.getSystemInfoSync();
    if (sys.platform === 'ios') {
      if (this.objectFit === 'cover') {
        this.videoFit = 'fill';
      }
    }
    // #endif
    let video = `video${this.videoId}`;
    this.videoContext = uni.createVideoContext(video, this);
    setTimeout(() => {
      this.videoContext.play();
    }, 10);
  },
  methods: {
    continuePlay() {
      if (!this.initialize) {
        setTimeout(() => {
          this.initialize = true;
          this.videoPlay();
        }, 1000);
      }
    },
    //拖动滑块
    changeCurrent(e) {
      this.time = e.detail.value;
      this.videoContext.seek(this.time);
    },
    timeupdate(event) {
      this.duration = event.detail.duration;
      if (this.time >= event.detail.duration) this.time = 0;
      this.time = event.detail.currentTime;
    },
    videoPlay() {
      if (this.videoTimer) {
        clearTimeout(this.videoTimer);
      }
      this.videoTimer = setTimeout(() => {
        if (this.play) {
          this.videoContext.play();
          this.OpenCover = false;
        } else {
          this.videoContext.pause();
          this.$emit('pause', this.time);
        }
      });
      // if (this.play) {
      // 	this.videoContext.play();
      // 	this.OpenCover = false;
      // } else {
      // 	this.videoContext.pause();
      // 	this.$emit('pause', this.time);
      // }
    },
  },
  watch: {
    //防抖 防止视频播放暂停太快
    play: function (newVal, oldVal) {
      if (this.initialize) this.videoPlay();
    },
    startTime: {
      immediate: true,
      handler(newVal, oldVal) {
        this.time = newVal;
      },
    },
    gDuration: {
      immediate: true,
      handler(newVal, oldVal) {
        this.duration = newVal;
      },
    },
  },
  computed: {
    barWidth() {
      let width = (this.time / this.duration) * parseInt(this.width);
      return `${width}px`;
    },
    startTime() {
      return this.initialTime;
    },
  },
};
</script>
<style scoped>
@import '@/static/style/wanlnvue.css';

.icon {
  opacity: 0.6;
  font-size: 120rpx;
  color: #fff;
}
.icon-spin {
  //#ifndef APP-PLUS-NVUE
  animation: spin 1.5s infinite linear;
  //#endif
}
.video-top {
  position: absolute;
  top: 0;
  background-image: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4));
  width: 750rpx;
  height: 300rpx;
}
.video-bottom {
  position: absolute;
  bottom: 0;
  background-image: linear-gradient(to top, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0));
  width: 750rpx;
  height: 300rpx;
}
.slider-view {
  position: absolute;
  left: 0;
  bottom: 30px;
  width: 750rpx;
}
.progressBar {
  border-radius: 2rpx;
  height: 4rpx;
  background-color: rgba(255, 255, 255, 0.3);
  z-index: 999999;
  position: absolute;
  left: 0;
  bottom: 0;
  //#ifndef APP-PLUS-NVUE
  animation: flicker 4s linear infinite;
  animation-direction: alternate;
  //#endif
}
/* #ifndef APP-PLUS-NVUE */
@keyframes flicker {
  0% {
    box-shadow: 0 0 0 #ffffff;
  }
  /** 暂停效果 */
  10% {
    box-shadow: 0 0 2upx #ffffff;
  }
  50% {
    box-shadow: 0 0 10upx #ffffff;
  }
  60% {
    box-shadow: 0 0 12upx #ffffff;
  }
  90% {
    box-shadow: 0 0 18upx #ffffff;
  }
  100% {
    box-shadow: 0 0 20upx #ffffff;
  }
}

@keyframes spin {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }

  100% {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}
/* #endif */
</style>
